import React, { Component } from 'react'
import { View, ScrollView, Swiper, SwiperItem, Image } from '@tarojs/components';
import baseNav from "../../layout/baseNav";
import { AtIcon, AtButton } from 'taro-ui';
import Input from '../../components/Input';
import Taro from '@tarojs/taro';
import store from '../../utils/store';

import './index.scss'

@baseNav(0)
export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      current: 0,
      swiperList: [
        { url: 'https://yuyublog.oss-cn-shanghai.aliyuncs.com/img/232535.jpg?x-oss-process=style/webp' },
        { url: 'https://yuyublog.oss-cn-shanghai.aliyuncs.com/img/217652.jpg?x-oss-process=style/webp' },
        { url: 'https://yuyublog.oss-cn-shanghai.aliyuncs.com/img/231285.jpg?x-oss-process=style/webp' },
        { url: 'https://yuyublog.oss-cn-shanghai.aliyuncs.com/img/CachedImage_2560_1440_POS4.jpg?x-oss-process=style/webp_low' }
      ]
    }
    this.static = {
      tabList: [{ title: '人找车' }, { title: '车找人' }]
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleClick(e) {
    this.setState({ current: e })
  }
  // 点击交换
  onRepeat() {
    this.setState({
      startValue: this.state.endValue,
      endValue: this.state.startValue
    })
  }
  // 点击立即查询
  handleDetail() {
    Taro.navigateTo({ url: '/pages/search/index' })
  }
  // 点击发布车找人
  publishCar() {
    store.setValue('publishWhich', 'car');
    Taro.navigateTo({ url: '/pages/publish/index' });
  }
  // 点击发布人找车
  publishMan() {
    store.setValue('publishWhich', 'man');
    Taro.navigateTo({ url: '/pages/publish/index' });
  }

  render () {
    const { swiperList, startValue, endValue } = this.state;
    return (
      <ScrollView
        className="home"
        scrollY
        scrollWithAnimation
      >
        <Swiper
          className="swiper"
          indicatorColor='#999'
          indicatorActiveColor='#333'
          vertical={false}
          circular
          indicatorDots
          autoplay>
          {
            swiperList.map(item => <SwiperItem>
              <Image className="swiper-item" src={item.url} mode="widthFix" />
            </SwiperItem>)
          }
        </Swiper>
        {/* 搜索 */}
        <View className="search">
          <View className="left">
            <View className="start">
              <Input type="text"
                     value={startValue}
                     onInput={(e) => this.setState({ startValue: e })}
                     placeholder="从哪儿出发" />
            </View>
            <View className="end">
              <Input type="text"
                     value={endValue}
                     onInput={(e) => this.setState({ endValue: e })}
                     placeholder="要到哪儿去"/>
            </View>
            <AtButton className="btn" type="secondary" circle onClick={this.handleDetail.bind(this)}>立即查询</AtButton>
          </View>
          <View className="right" onClick={this.onRepeat.bind(this)}><AtIcon value="repeat-play" /></View>
        </View>
        {/* 发布 */}
        <View className="publish">
          <View className="title">发布行程</View>
          <AtButton type="primary" onClick={this.publishCar.bind(this)}>我是车主,我要找乘客</AtButton>
          <AtButton type="primary" onClick={this.publishMan.bind(this)}>我是乘客,我要找拼车</AtButton>
        </View>
      </ScrollView>
    )
  }
}
